<template>
  <div class="service">
    <div class="serice-box">
      <ul>
        <li v-for="item in 5">
          <a href="javascript:"><i class="fa fa-wrench fa-2x" aria-hidden="true"></i>预约维修服务</a>
        </li>
      </ul>
    </div>
    <div class="serice-list">
      <dl v-for="item in sericelist.serice">
        <dd>{{item.dd1}}</dd>
        <dd>{{item.dd2}}</dd>
        <dd>{{item.dd3}}</dd>
        <dd>{{item.dd4}}</dd>
      </dl>
    </div>
    <div class="serice-right">
      <p class="phone">400-100-5678</p>
      <p class="time">周一至周日 8:00-18:00</p>
      <p class="term">（仅收市话费）</p>
      <a href="javascript:">人工服务</a>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        sericelist: {
          serice: [{
              dd1: "帮助中心",
              dd2: "账户管理",
              dd3: "购物指南",
              dd4: "订单操作"
            },
            {
              dd1: "服务支持",
              dd2: "售后支持",
              dd3: "自动服务",
              dd4: "相关下载"
            },
            {
              dd1: "线下门店",
              dd2: "小米之家",
              dd3: "服务网店",
              dd4: "授权体验店"
            },
            {
              dd1: "关于小米",
              dd2: "了解小米",
              dd3: "加入小米",
              dd4: "投资者关系"
            },
            {
              dd1: "关注我们",
              dd2: "新浪微博",
              dd3: "官方微信",
              dd4: "联系我们"
            },
            {
              dd1: "特色服务",
              dd2: "F码通道",
              dd3: "礼物码",
              dd4: "防伪查询"
            }

          ]
        }
      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style scoped="scoped">
  @import url("../../static/style/font-awesome-4.7.0/css/font-awesome.css");

  .service {
    position: relative;
    width: 100%;
    height: 20.625rem;
  }

  .service .serice-box {
    position: absolute;
    border-bottom: 1px solid #e0e0e0;
    width: 97.2rem;
    left: 10.625rem;
  }

  .service .serice-box ul li {
    width: 15.125rem;
    height: 5rem;
    line-height: 5rem;
    float: left;
    margin-right: 4rem;
  }

  .service .serice-box ul li a {
    display: block;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
    margin-top: 1.2375rem;
    color: #616161;
    font-size: 1.4rem;
    border-right: 1px solid #E0E0E0;
  }

  .service .serice-box ul li a i {
    padding-right: 0.25rem;
  }

  .service .serice-list {
    position: absolute;
    left: 10.625rem;
    top: 8.25rem;
  }

  .service .serice-list dl {
    width: 11.9rem;
    height: 12rem;
    float: left;
  }

  .service .serice-list dl dd:first-child {
    color: #424242;
    font-size: 1.2rem;
    margin-bottom: 1.55rem;
  }

  .service .serice-list dl dd {
    margin-bottom: 1.25rem;
    color: #757575;
  }

  .service .serice-right {
    border-left: 1px solid #E0E0E0;
    position: absolute;
    top: 8.25rem;
    left: 83rem;
    width: 200px;
    height: 9.8rem;
  }

  .service .serice-right .phone {
    text-align: center;
    font-size: 1.7rem;
    color: #FF6700;
  }
  .service .serice-right .time{
    text-align: center;
    font-size: 0.75rem;
    color: #616161;
  }
  .service .serice-right  .term{
    text-align: center;
    color: #616161;
    margin-bottom: 1.25rem;
  }
  .service .serice-right  a{
    border: 1px solid #ff6700;
    display: block;
    width: 9.125rem;
    height: 1.875rem;
    margin: 0 auto;
    text-align: center;
    line-height: 1.975rem;
    overflow: hidden;
    color: #ff6700;
  }
  .service .serice-right  a:hover{
    background-color: #ff6700;
    color: #FFFFFF;
  }
</style>
